<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:700italic,400' rel='stylesheet' type='text/css'>
<style type="text/css">

	a:focus{
    	outline:none;
	}
   	/* 크롬 경계선 없애기 */
   	:focus{
	  outline-color: transparent;
	  outline-style: none;
	}
	.btn:focus {
		outline: none;
	}
	.header-search-form{
		padding-top: 10px;
		margin-left: 10px;
	}
	#search-query{
		width: 120px;
		height: 34px;
		background-color: #fff;
		border-radius: 6px;
		border: 1px solid #ccc;
		border-right: 0;
		border-bottom-right-radius: 0;
		border-top-right-radius: 0;
		padding-left: 10px;
	    -webkit-transition: all 0.7s ease 0s;
	    -moz-transition: all 0.7s ease 0s;
	    -o-transition: all 0.7s ease 0s;
	    transition: all 0.7s ease 0s;
	}
	#search-query:focus {
	    width: 200px;
	}
	#search-query-button{
		padding-right: 10px;
		margin-left: -1px;
		background-color: #fff;
		height: 34px;
		border-radius: 6px;
		border: 1px solid #ccc;
		border-left: 0;
		border-bottom-left-radius: 0;
		border-top-left-radius: 0;
	}
	.dropdown.open {
   		background: #fff;
	}
	.logo{
		margin:0 auto;
		width: 140px;
		font-size: 24px;
		line-height: 20px;
		padding-top: 15px;
	}
	.logo a{
		text-decoration: none;
		text-shadow: #fff 0px 1px 1px;
		font-family: 'Open Sans', 'sans-serif';
		font-style: italic;
		font-weight: 700;
		color:#6fab87
	}
	.menu-toggle {
		padding: 9px 10px;
		margin-top: 8px;
		background-color: #fff;
		border: 1px solid #ddd;
		border-radius: 4px;
	}
	.menu-toggle .icon-bar {
		display: block;
		width: 22px;
		height: 2px;
		border-radius: 1px;
		background-color: #888;
	}
	.menu-toggle .icon-bar + .icon-bar {
		margin-top: 4px;
	}
	.menu-toggle:focus,
	.menu-toggle:hover{
		background-color: #ddd;
	}
	
	
	/* .dropdown-menu:before {
		position: absolute;
		top: -13px;
		right: 10px;
		display: inline-block;
		border-right: 13px solid transparent;
		border-bottom: 13px solid #ccc;
		border-left: 13px solid transparent;
		border-bottom-color: rgba(0, 0, 0, 0.3);
		content: '';
	}

	.dropdown-menu:after {
		position: absolute;
		top: -12px;
		right: 11px;
		display: inline-block;
		border-right: 12px solid transparent;
		border-bottom: 12px solid #ffffff;
		border-left: 12px solid transparent;
		content: '';
	} */
	
	/* mobile sub nav */
	.mobile-expander{
		transition: right 0.3s ease-in-out 0s;
		transition: right 0.3s ease-in-out 0s;
		-webkit-transition: right 0.3s ease-in-out 0s;
		-moz-transition: right 0.3s ease-in-out 0s;
  		-o-transition: right 0.3s ease-in-out 0s;
	}
	a.nav-expander {
  background: none repeat scroll 0 0 #000000;
  color: #FFFFFF;
  display: block;
  font-size: 15px;
  font-weight: 400;
  height: 50px;
  margin-right: 0;
  padding: 1em 1.6em 2em;
  position: absolute;
  right: 0;
  text-decoration: none;
  text-transform: uppercase;
  top: 0;
  transition: right 0.3s ease-in-out 0s;
  width: 130px;
  z-index: 12;

  transition: right 0.3s ease-in-out 0s;
  -webkit-transition: right 0.3s ease-in-out 0s;
  -moz-transition: right 0.3s ease-in-out 0s;
  -o-transition: right 0.3s ease-in-out 0s;

}

.nav-expanded a.nav-expander.fixed {
    right: 20em;
}

nav {
  background: #2d2f33;
  display: block;
  height: 100%;
  overflow: auto;
  position: fixed;
  right: -20em;
  font-size: 15px;
  top: 0;
  width: 20em;
  z-index: 2000;

  transition: right 0.3s ease-in-out 0s;
  -webkit-transition: right 0.3s ease-in-out 0s;
  -moz-transition: right 0.3s ease-in-out 0s;
  -o-transition: right 0.3s ease-in-out 0s;

}
.nav-expanded nav {
  right: 0;
}

body.nav-expanded {
  margin-left: 0em;
  transition: right 0.4s ease-in-out 0s;
  -webkit-transition: right 0.4s ease-in-out 0s;
  -moz-transition: right 0.4s ease-in-out 0s;
  -o-transition: right 0.4s ease-in-out 0s;
}

#nav-close {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight: 300;
  font-size: 24px;
  padding-right: 10px;
}


.main-menu {
  padding-top: 12px;
}

.main-menu li {
  border-bottom: 1px solid #323949;
  margin-left: 20px;
  font-size: 18px;
  padding: 12px;
}

.main-menu li a {
  color: #6F7D8C;
  text-decoration: none;
}

.main-menu li a:hover {
  color: #FFFFFF;
  text-decoration: none;
}

.main-menu li .sub-nav {
  border-bottom: 0px;
  padding: 4px;
}

.main-menu a .caret {
	width: 0;
	height: 0;
	display: inline-block;
	vertical-align: top;
	border-top: 4px solid #4f5963;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	content: "";
    margin-top: 8px;
}

.main-menu a:hover .caret {
	border-top-color: #4f5963;
}

.main-menu li.open > a > .caret {
	border-top: none;
	border-bottom: 4px solid #4f5963;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
}

.main-menu li.open > a:hover > .caret {
	border-bottom-color: #4f5963;
}

.icon:before {
  font-family: 'FontAwesome';
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-transform: none;
  content: '\f105';
}

.main-menu li > a > span.icon {
  float: right;
  margin: 0.1em 1.7em -0.1em 0;
  opacity: 0;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;

}

.main-menu li > a:hover > span.icon {
  float: right;
  margin: 0.1em 0.8em -0.1em 0;
  opacity: 1;
}
/* mobile sub nav */
</style>
<script src="/resources/js/jquery.navgoco.js"></script>
<script type="text/javascript">
  	/* var check = '${userDto.num}';
  	if(check == ""){
  		location.href='/';
  	} */
  	
  	/* 10초에 한번씩 알림 가져오기 */
  	setInterval(getNotificationCount, 10000);
  	
  	function logout(){
  		var loginApp = "${userDto.loginApp}";
  		
  		if(loginApp == "fb"){
  			FB.logout(function(response) {
  				location.href = "/logout";
  			});
  			
  		}else{
  			location.href = "/logout";
  		}
  	}
  	
  	/* 그룹리스트 가져오기 */
  	function getGroupList(){
		$.ajax({
		    type : "POST"
		    , url : "/getMyGroupList?num="+'${userDto.num}'
		    , dataType : "json"
		    , timeout : 5000
		    , error : function(request, status, error) {
		    	alert("그룹목록을 가져올 수 없습니다.\r잠시후 다시 이용해 주세요");
		    }
		    , success : function(response) {
		    	if(response == ""){
		    		$("#groupList").html("<li><a href='/searchGroup'>가입된 그룹이 없습니다</a></li>");
		    	}else{
		    		$("#groupList").html("");
		    		for(var i=0;i<response.length;i++){
		    		$("#groupList").append("<li><a href='/"+response[i].url+"'>"+ response[i].name +"</li>");
		    		}
		    	}
		    }
		    , beforeSend: function() {
		    	$('#ajax_indicator').show().fadeIn('fast'); 
		    }
		    , complete: function() {
		    	$('#ajax_indicator').fadeOut('fast');
		    }
		});
  	}
  	
  	/* 읽지 않은 알림 갯수 가져오기 */
  	function getNotificationCount(){
		$.ajax({
		    type : "POST"
		    , url : "/getNotiCount?num="+'${userDto.num}'
		    , dataType : "text"
		    , timeout : 5000
		    , error : function(request, status, error) {
		    	
		    }
		    , success : function(response) {
		    	$("#notiCount").html(response);
		    	if(response == 0){
		    		$("#notiCount").hide();
		    		$("#notiDis").attr("title", "확인하지 않은 알림 없음");
		    	}else{
		    		$("#notiCount").show();
		    		$("#notiDis").attr("title", "새로운 알림 "+response+"건");
		    	}
		    }
		    , beforeSend: function() {
		    }
		    , complete: function() {
		    }
		});
  	}
  	
  	/* 알림 내용 가져오기 */
  	function getNotiList(){
		$.ajax({
		    type : "get"
		    , url : "/getNotiList?num="+'${userDto.num}'
		    , dataType : "json"
		    , timeout : 5000
		    , error : function(request, status, error) {
		    	alert('dd');
		    }
		    , success : function(response) {
		    	if(!response.length == 0){
		    		$("#notiList").html("");
		    		for(var i=0;i<response.length;i++){
		    			$("#notiList").append("<li><a href='#'>"+response[i].description+"</a></li>");
			    	}
		    		$("#notiCount").hide();
		    		$("#notiDis").attr("title", "확인하지 않은 알림 없음");
		    	}else{
		    		$("#notiList").html("<li><a href='#'>표시할 알림이 없습니다</a></li>");
		    	}
		    }
		    , beforeSend: function() {
		    	$('#ajax_indicator2').show().fadeIn('fast'); 
		    }
		    , complete: function() {
		    	$('#ajax_indicator2').fadeOut('fast');
		    }
		});
  	}
  	
  	$().ready(function(){
  		getNotificationCount();
  		
  	//Navigation Menu Slider
        $('#nav-expander').on('click',function(e){
          e.preventDefault();
          $('body').toggleClass('nav-expanded');
        });
        $('#nav-close').on('click',function(e){
          e.preventDefault();
          $('body').removeClass('nav-expanded');
        });
 
        // Initialize navgoco with default options
        $(".main-menu").navgoco({
            caret: '<span class="caret"></span>',
            accordion: false,
            openClass: 'open',
            save: true,
            cookie: {
                name: 'navgoco',
                expires: false,
                path: '/'
            },
            slide: {
                duration: 300,
                easing: 'swing'
            }
        });
 
  	});
 	
 	/* 페이스북 SDK 초기화 */ 
	window.fbAsyncInit = function() {
		FB.init({appId: '1470611313169572', status: true, cookie: true,xfbml: true});
    };
		
	(function(d){
	     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
	     if (d.getElementById(id)) return;
	     js = d.createElement('script'); js.id = id; js.async = true;
	     js.src = "//connect.facebook.net/ko_KR/all.js";
	     ref.parentNode.insertBefore(js, ref);
	 }(document));
</script>
	    	
    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation" style="box-shadow: 1px 0px 3px rgba(0,0,0,0.4);">
    	<div class="container">
    		
    		<!-- PC환경에서 레이아웃  -->
    		<div class="hidden-xs">
    		<div class="navbar-header">
    			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    				<span class="icon-bar"></span>
    				<span class="icon-bar"></span>
    				<span class="icon-bar"></span>
    			</button>
    			<a class="navbar-brand" href="/">Logo</a>
	        </div>
	        
    		<div class="collapse navbar-collapse">
    			<ul class="nav navbar-nav">
    				<li class="dropdown">
    					<a title="그룹" class="dropdown-toggle" data-toggle="dropdown" onclick="getGroupList()" style="cursor: pointer;">
    						<i class="fa fa-group" style="font-size:1.3em;"></i>
    					</a>
    				<ul class="dropdown-menu" id="groupList">
    					<li id="ajax_indicator" style="display:none;text-align:center;">
							<a href="#"><img src="/resources/img/ajax-loader.gif" /></a>
						</li>
					</ul>
					</li>
					<li><a href="#" title="메시지"><i class="glyphicon glyphicon-comment" style="font-size:1.3em;"></i></a></li>
					<li class="dropdown">
    					<a onclick="getNotiList()" style="cursor: pointer;" class="dropdown-toggle" data-toggle="dropdown" id="notiDis">
    						<i class="fa fa-bell" style="font-size:1.3em;"></i>
    						<span class="badge alert-danger" style="position: absolute; left:23px; top:3px;" id="notiCount"></span>
    					</a>
    				<ul class="dropdown-menu" id="notiList">
    					<li id="ajax_indicator2" style="display:none;text-align:center;">
							<a href="#"><img src="/resources/img/ajax-loader.gif" /></a>
						</li>
					</ul>
					</li>
					<li class="header-search-form">
						<form>
							<input type="text" id="search-query" placeholder="검색" style="float: left;" title="검색">
							<button type="button" id="search-query-button"><i class="fa fa-search" style="font-size: 15px; color: #989898; float: left;"></i></button>
						</form>
					</li>
    			</ul>
    			
    			<ul class="nav navbar-nav navbar-right commonFont">
    				<li class="dropdown">
    					<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" style="cursor: pointer; padding-top:10px; padding-bottom: 10px;" title="${userDto.name}">
    					<c:if test="${null ne userDto.profileImage}">
    						<img id="displayProfileImage" class="img-circle" src="/profileImageViewer/${userDto.num}" width="30px;" height="30px;">
    					</c:if>
    					<c:if test="${null eq userDto.profileImage}">
    						<img id="displayProfileImage" class="img-circle" src="/resources/img/default_profile_pic.png" width="30px;" height="30px;">
    					</c:if>
    					<span id="displayName">&nbsp;${userDto.name}&nbsp;<b class="caret"></b></span>
    					</a>
    				<ul class="dropdown-menu" role="menu" style="min-width: 180px;">
    					<li><a href="/searchGroup"><span class="fa fa-search" style="margin-right:10px;"></span>그룹찾기</a></li>
    					<li><a href="/createGroup"><span class="fa fa-group" style="margin-right:10px;"></span>그룹만들기</a></li>
    					<li class="divider"></li>
    					<li><a href="/settings"><span class="glyphicon glyphicon-user" style="margin-right:10px;"></span>계정설정</a></li>
    					<li><a href="javascript:logout();"><span class="glyphicon glyphicon-log-out" style="margin-right:10px;"></span>로그아웃</a></li>
    					<li class="divider"></li>
    					<li><a href="/help"><span class="glyphicon glyphicon-flag" style="margin-right:10px;"></span>고객센터</a></li>
    					<li><a href="#"><span class="glyphicon glyphicon-edit" style="margin-right:10px;"></span>문제신고</a></li>
					</ul>
				</li>
    			</ul>
    		</div>
    		</div>
    		<!-- PC환경에서 레이아웃  -->
    		
    		<!-- 모바일 레이아웃 -->
	    	<div class="navbar-header visible-xs">
    			<button type="button" class="menu-toggle mobile-expander" id="nav-expander" style="right:0; position: absolute;">
    				<span class="icon-bar"></span>
    				<span class="icon-bar"></span>
    				<span class="icon-bar"></span>
		    	</button>
    		</div> <!-- 모바일 레이아웃 -->		
    	</div> <!-- /container -->
    </div>
    <!-- Fixed navbar -->
    
 	
 
    <!--Include your navigation here-->
    <nav>
    <ul class="list-unstyled main-menu">
    <li class="text-right"><a href="#" id="nav-close">X</a></li>
    <li><a href="#">Menu One <span class="icon"></span></a></li>
    <li><a href="#">Menu Two <span class="icon"></span></a></li>
    <li><a href="#">Menu Three <span class="icon"></span></a></li>
    <li><a href="#">Dropdown</a>
      <ul class="list-unstyled">
          <li class="sub-nav"><a href="#">Sub Menu One <span class="icon"></span></a></li>
          <li class="sub-nav"><a href="#">Sub Menu Two <span class="icon"></span></a></li>
          <li class="sub-nav"><a href="#">Sub Menu Three <span class="icon"></span></a></li>
          <li class="sub-nav"><a href="#">Sub Menu Four <span class="icon"></span></a></li>
          <li class="sub-nav"><a href="#">Sub Menu Five <span class="icon"></span></a></li>
      </ul>
    </li>
    <li><a href="#">Menu Four <span class="icon"></span></a></li>
    <li><a href="#">Menu Five <span class="icon"></span></a></li>
  </ul>
	</nav>
 	